<template>
  <div class="container">
    <div class="upload-box">
      <div class="reset-back" v-show="isShowStepOne">
        <!-- 修改数据 -->
        <div class="link" @click="changLogData">{{$t('page.modData')}}</div>
        <!-- 清空数据 -->
        <span class="link" @click="handleRemove">{{$t('page.emptyData')}}</span>
      </div>
      <!-- 第一个上传 -->
      <div 
        v-show="isShowExcel === 'excel1' || isShowExcel === 'true'">
        <!-- <h4 
          v-show="isShowUpload"
          style="text-align: center;"
        >{{$t('page.entrance1')}}</h4> -->
        <el-upload 
          ref="rebateUpload"
          class="upload-demo"
          drag
          action="aa"
          name="excel"
          :limit="1"
          :before-upload="beforeUpload"
          :headers="headerUpload"
          accept=".zip,.xlsx"
          :http-request="UploadImage"
          :on-remove="removeFile1"
          :show-file-list="false"
          :on-error="handleError"
          v-show="isShowUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
        </el-upload>
        
        <div class="upload-name-box">
          <!-- 上传文件名字 -->
          <div class="upload-name"
            v-show="isShowUploadtxt">
            {{uploadFile.name }}
            <el-button type='text'
              @click="removeFile1()">x</el-button>
          </div>
          <!-- 加载进度条 -->
          <el-progress 
            :percentage="percentage"
            :color="customColor"
            v-show="isShowPer">
          </el-progress>
        </div>
      </div>

      <!-- 第二个上传 -->
      <!-- <UploadFile 
        ref="secondUpload"
        v-show="isShowExcel === 'excel2' || isShowExcel === 'true'"
        @uploadExcel2="uploadExcel2"
        @removeFile="removeFile"
      ></UploadFile> -->
    </div>
    <!-- 上传按钮 -->
    <div class="upload-btn">
      <el-button 
        v-if="!isShowStepOne"
        type="primary" 
        :loading="isLoading"
        @click="uploadHandler"
      >{{$t('page.uploadText')}}</el-button>
    </div>

    <div 
      class="container-body"
      v-if="isShowStepOne">
      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>
        <div v-for="(listItem,listIndex) in originalData" :key="listIndex">
          <div class="overflow">
            <!-- 大 - 数据表格 -->
            <table id="table-1">
              <tr v-for="(table,key,index) in setListItem(listItem)" :key="index">
                <!-- 浓度 -->
                <td class="color-000">
                  {{key!=='time'?key:$t('page.label')}}
                </td>
                <!-- 标签 -->
                <td>
                  <span 
                    v-if="key!=='time'">
                    {{beforeLable[index-1]}}
                  </span>
                  <span 
                    class="color-000"
                    v-else>{{$t('page.mark')}}
                  </span>
                </td>
                <td v-for="(iTable, index) in table" :key="index">
                  <span v-if="key!=='time'">{{iTable}}</span>
                  <span 
                    class="color-000"
                    v-else>{{iTable + 's'}}</span>
                </td>
              </tr>
            </table>
          </div>

          <div class="space"
              v-if="dissType === 'v1'">
            <div class="title-space">
              <span>{{$t('page.ODrate')}}（%）： </span>
            </div>

            <div class="overflow"
                v-for="(lightRateItem,lightRateIndex) in lightRate" :key="lightRateIndex">
              <table id="table-1">
                <tr v-for="(table,key,index) in lightRateItem"
                    :key="index">
                  <td class="color-000">{{key!=='time'?key:$t('page.hole')}}</td>
                  <td>
                    <span v-if="key!=='time'">
                      {{beforeLable[index-1]}}{{unit}}
                    </span>
                    <span class="color-000"
                          v-else>
                      {{$t('page.parameter')}}
                    </span>
                  </td>
                  <td v-for="(iTable, index) in table" :key="index">
                    <span v-if="key!=='time'">{{iTable}}</span>
                    <span class="color-000"
                          v-else>{{iTable + 's'}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <!-- 不知道什么用 -->
          <!-- <div class="space text-center">
            <template v-for="(chart,index) in allLightRateCharts">
              <div class="chart">
                <wave-chart 
                  :id="'LightRate1'+index"
                  :data='chart'>
                </wave-chart>
              </div>
            </template>
          </div> -->

          <!-- 线型echarts -->
          <linePointDiagram
            v-show="graphicalList.includes('1')"
            style="margin-top: 40px"
            :value="resultFormatValue"
            :title="$t('page.originalFigure')"
            @generateImg="shotImg(graphicalList.includes('1'), $event)"
          ></linePointDiagram>

          <linePointDiagram
            v-show="graphicalList.includes('2')"
            style="margin-top: 40px"
            :value="reductionWater"
            :title="$t('page.ZeroFigure')"
            @generateImg="shotImg(graphicalList.includes('2'), $event)"
          ></linePointDiagram>

          <!-- <Saccharose 
            v-show="graphicalList.includes('2')" 
            style="margin-top: 40px"
            :originalData="reductionWater"
            id="waveSingle"
            :title="$t('page.ZeroFigure')"
            :resultValue="resultValue"
            :sprone_dissociation="sprone_dissociation"
            @showImg="shotImg(graphicalList.includes('2'), $event)"
          ></Saccharose> -->

          <FittedCurve
            v-show="graphicalList.includes('3')" 
            style="margin-top: 40px"
            :originalData1="subtract"
            :originalData2="fittedingList"
            :originalData3="optimizeList"
            :resultValue="resultValue"
            :dissociation="dissociation"
            :title="$t('page.dissociationData')"
            @showImg="shotImg(graphicalList.includes('3'), $event)"
          ></FittedCurve>

          <img :src="avg5_map.imgPath" alt="img" style="width: 50%;height: auto;">

          <!-- <div style="text-align: center;" v-show="graphicalList.includes('3')" >
            <p>
              <span>{{ $t('page.isComplete')}}：</span>
              <el-switch
                v-model="isComplete"
                active-text="是"
                inactive-text="否">
              </el-switch>
            </p>
            <div class="completeBox">
              <div class="complete_Item" v-for="item in completeList" :key="item.key">
                <h4>{{$t('page.holeName')}}：{{ item.key }}</h4>
                <p>
                  <span>{{ $t('page.start_jiehe')}}：</span>
                  <el-input 
                    type="number"
                    v-model="item.start_jiehe" 
                    :disabled="!isComplete"
                    @keyup.native="item.start_jiehe=item.start_jiehe.replace(/[^0-9]/g,'')"
                    placeholder="请输入"></el-input>
                </p>
                <p>
                  <span>{{ $t('page.end_jiehe') }}：</span>
                  <el-input 
                    type="number"
                    v-model="item.end_jiehe" 
                    :disabled="!isComplete"
                    @keyup.native="item.end_jiehe=item.end_jiehe.replace(/[^0-9]/g,'')"
                    placeholder="请输入"></el-input>
                </p>
                <p>
                  <span>{{  $t('page.start_jieli')}}：</span>
                  <el-input 
                    type="number"
                    v-model="item.start_jieli" 
                    :disabled="!isComplete"
                    @keyup.native="item.start_jieli=item.start_jieli.replace(/[^0-9]/g,'')"
                    placeholder="请输入"></el-input>
                </p>
                <p>
                  <span>{{$t('page.end_jieli') }}：</span>
                  <el-input 
                    type="number"
                    v-model="item.end_jieli" 
                    :disabled="!isComplete"
                    @keyup.native="item.end_jieli=item.end_jieli.replace(/[^0-9]/g,'')"
                    placeholder="请输入"></el-input>
                </p>
              </div>
            </div>
            <el-button 
              style="margin-top: 30px;width: 160px;" 
              type="primary"
              :loading="computeLoading"
              @click="handleCompute({}, true)"
            >{{$t('page.submit') }}</el-button>
          </div> -->
        </div>

        <!-- 计算结果 -->
        <div class="title-space">
          <span>{{$t('page.calResultes')}}：</span>
          <el-button 
            type="text"
            @click="downloadExl()"
            size="mini">{{$t('page.export')}}</el-button>
        </div>
        <div class="overflow">
          <div class="title-space">
            <span>{{$t('page.molecular')}}（Da）：</span>
            {{mole}}
          </div>
          <ParamTable :paramResult="paramTableInfo"></ParamTable>
        </div>

        <div class="space"
             v-show="isShowStepTwo">

          <div v-if="dissType === 'v1'">
            <div class="overflow step-two">
              <table id="table-1">
                <template v-for="stepTwoItem in stepTwoList">
                  <tr v-for="(table,key,index) in stepTwoItem" :key="index">
                    <td class="color-000">
                      <span v-if="key!=='title'">{{key}}</span>
                      <span v-else>{{$t('page.hole')}}</span>
                    </td>
                    <td 
                      v-for="(iTable, iIndex) in table" 
                      :key="iIndex"
                      class="color-000">
                        <template v-if="key ==='title'">
                          <span v-html="iTable"></span>
                        </template>
                    </td>
                    <td 
                      v-for="(iTable, index) in table"
                      :key="index">
                        <template v-if="key !=='title'">
                          <span :style="{color:iTable===extA?'#409eff':''}"
                                v-if="iTable===extA"> ({{$t('page.recommended')}}){{iTable}}</span>
                          <span v-else> {{iTable}}</span>
                        </template>
                    </td>
                  </tr>
                </template>
              </table>
            </div>

            <div 
              class="img-list"
              v-for="(img,index) in imgList"
              :key="index"
              style="width:60%;float:left;">
              <div class="img-item">
                <img :src="img" alt="">
              </div>
            </div>

            <div style="width:40%;float:left;padding-left:50px;margin-top:25px;">
              <table id="table-2">
                <tr>
                  <td width="50%">
                    {{$t('page.formula')}}
                  </td>
                  <td>
                    y=x*Rmax/(x+KD)
                  </td>
                </tr>
                <tr>
                  <td width="50%">{{$t('page.parameter')}}</td>
                  <td>
                    <span class="data-item"><span class="k">K</span>a:{{parameter[1]}}</span>
                    <span class="data-item"><span class="k">K</span>d:{{parameter[2]}}</span>
                    <span class="data-item"><span class="k">K</span>D:{{parameter[3]}}</span>
                  </td>
                </tr>

                <tr>
                  <td width="50%">{{$t('page.parameter')}}</td>
                  <td>
                    <span class="data-item">{{parameter[0]}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

        </div>
      </template>
    </div>

    <!-- -输入配置参数数据-弹窗 -->
    <el-dialog 
      :visible.sync="isShowInputLog"
      :close-on-click-modal="false"
      width="90%"
      top="5%"
      center>
        <div>
          <div 
            class="space"
            style="margin-bottom: 10px;">
            <div class="space-title">{{$t('page.module')}}：</div>
            <el-checkbox-group v-model="graphicalList">
                <el-checkbox label="1">{{ $t('page.originalFigure') }}</el-checkbox>
                <el-checkbox label="2">{{ $t('page.ZeroFigure') }}</el-checkbox>
                <el-checkbox label="3">{{ $t('page.dissociationData') }}</el-checkbox>
              </el-checkbox-group>
          </div>
          <!-- 标签 -->
          <div 
            class="space"
            style="margin-bottom: 10px;">
            <div class="label-title">{{$t('page.mark')}}：</div>
            <table id="table-1">
              <tr>
                <td v-for="(table,index) in waveName"
                    :key="index"
                    width="100">
                  <el-input type="text"
                    v-model="beforeLable[index]">
                  </el-input>
                </td>
              </tr>
            </table>
        </div>
        <!-- 浓度 -->
        <div class="space">
          <div class="space-title">{{$t('page.label')}}：</div>
          <table id="table-1">
            <tr>
              <td v-for="(table,index) in waveName"
                  :key="index"
                  width="100">
                {{table}}
              </td>
            </tr>
          </table>
        </div>
        <!-- 公式选择 -->
        <div class="space" style="margin-top:20px;">
          <div class="space-title">{{$t('page.formula')}}：</div>
          <el-radio-group v-model="formulaValue">
            <el-radio :label="0">{{$t('page.default')}}</el-radio>
            <el-radio :label="1">{{$t('page.newFormula')}}</el-radio>
          </el-radio-group>
        </div>
        <!-- 分子量 -->
        <div class="space">
          <div class="title-space">
            <div class="space-title">{{$t('page.molecular')}}（Da）：</div>
            <el-input 
              type="number"
              class="input"
              v-model="mole"
              style="width:300px;">
            </el-input>
          </div>
        </div>
        <!-- RMax -->
        <div class="space">
          <div class="title-space">
            <div class="space-title">Rmax：</div>
            <el-input 
              type="number"
              class="input"
              v-model="Rmax"
              style="width:300px;">
            </el-input>
          </div>
        </div>
        <!-- 是否归零 -->
        <div class="space" style="margin-top: 20px">
          <div class="space-title">{{$t('page.zeroProcess')}}：</div>
          <el-radio v-model="zero" label='0'>{{$t('page.zero')}}</el-radio>
          <el-radio v-model="zero" label="1">{{$t('page.noZero')}}</el-radio>
        </div>
        <!-- 是否优化 -->
        <div class="space" style="margin-top: 20px">
          <div class="space-title">{{$t('page.absolute')}}：</div>
          <el-radio v-model="absolute" :label='0'>{{$t('page.default')}}</el-radio>
          <el-radio v-model="absolute" :label="1">{{$t('page.optimize')}}</el-radio>
        </div>
        <!-- 是否拟合优化 -->
        <!-- <div class="space" style="margin-bottom: 20px;">
          <div class="space-title">{{$t('page.fit_opt')}}：</div>
          <el-radio v-model="fitting" :label='0'>{{$t('page.default')}}</el-radio>
          <el-radio v-model="fitting" :label="1">{{$t('page.optimization')}}</el-radio>
        </div> -->

        <div class="space-btn">
          <el-button 
            type="primary"
            @click="handleCompute()"
            size="small"
            :loading="computeLoading"
            class="btn-submit-color">
              {{$t('page.submit')}}
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
// import waveChart from '@/components/WaveChart'
import { fetchUploadExl, weSprStep2onewt, weSprStatdyStep1 } from '@/api/table'
import { setStore, getStore } from '@/utils/common'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { COLORLIST } from '@/utils/variate'
import Saccharose from './saccharose.vue'
import FittedCurve from './fittedCurve.vue'
import ParamTable from '@/components/ParamTable'
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'

export default {
  data() {
    return {
      graphicalList: ['1', '2', '3'],
      originalData: [],
      originalDataRate: [],
      lightRate: [],
      markLineValue: null,
      stepTwoList: [],
      computeLoading: false, //显示计算loading
      computeAllowed: true, //防连点
      isShowInputLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowStepTwo: false, //是否显示第二步表格
      showScreenshotsImg: true, //页面上的曲线隐藏
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      // mole: '115207373',
      unit: 'μg/ml',
      unitOption: ['pg/ml', 'ng/ml', 'μg/ml', 'mg/ml'],
      isShowPer: false,
      percentage: 0,
      customColor: '#e6a23c',
      allLightRateCharts: [],
      allStepOneCharts: [],
      isRepeatSubmit: false,
      extA: '',
      imgList: '',
      lang: getStore('spr-lang') || 'zh', // 语言类型
      unitTitle: [],
      parameter: [],
      waveName: [],      // 浓度数据
      beforeLable: [],  // 标签数据
      baseStepOne: [],
      doDownload: false,
      // paramResult: [],
      dissociation: [],   // 结合解离标识线数据
      sprone_dissociation: [],  // 原始、归零 标识线数据
      dissType: '',
      // formulaValue: 0, // 公式选择
      uploadExcel: {
        excel1: null, // 上传的第一个表格
        excel2: null, // 上传的第二个表格
      },
      isShowExcel: 'true', // 判断展示哪个上传
      isLoading: false, // 上传按钮loading
      resultValue: {},   // 计算之后的结果
      tooltipList: [],  // 用于echarts的tooltip数组
      colorList: COLORLIST, // 颜色列表
      reductionWater: [] ,// 蔗糖减水全光谱
      subtract: [],   // 光谱差
      zero: '0',   // 是否归零
      formulaValue: 0, // 公式选择
      mole: '115207373',
      paramResult: [], // 分子量表格
      fittedingList: [],
      // 是否全填
      isComplete: true,
      completeList: [],

      fitting: 0,
      optimizeList: [],
      Rmax: '',
      paramTableInfo: {},
      avg5_map: {},
      absolute: 0,
      resultFormatValue: {}
    }
  },
  components: {
    // waveChart,
    Saccharose,
    FittedCurve,
    ParamTable,
    linePointDiagram,
  },
  methods: {
    setListItem(data) {
      const obj = {}
      const obj1 = {}
        for (const k in data) {
          if ("time" === k) {
            obj[k] = data[k]            
          } else {
            obj1[k] = data[k]
          }
        }
      return {...obj, ...obj1}
    },

    // 点击上传按钮
    async uploadHandler() {
      this.isLoading = true
      let formData = new FormData()
      formData.append('type', 'formData')
      let { excel1, excel2} = this.uploadExcel
      if(excel1 && excel2) {
        formData.append('excel', excel1)
        formData.append('excel1', excel2)
        // isShowExcel = 'true'
      } else if (excel1 || excel2) {
        for (const k in this.uploadExcel) {
          if (this.uploadExcel[k]) {
            this.isShowExcel = k
            formData.append('excel', this.uploadExcel[k])
          }
        }
      } else {
        this.isLoading = false
        return this.$message.warning('请先上传文件')
      }
      try{
        const res = await weSprStatdyStep1(formData)
        this.uploadSuccess(res)
      }catch(err) {
        console.log(err);
      }
      this.isLoading = false
    },

    // 第一个上传
    UploadImage(data) {
      this.uploadExcel.excel1 = data.file
      this.percentage = 100
      setTimeout(() => {
        this.isShowPer = false
      }, 500)
    },

    /* 第二个上传回调 */
    uploadExcel2(value) {
      this.uploadExcel.excel2 = value
    },
    // 第二个上传移除文件
    removeFile() {
      if(this. isShowExcel !== 'true') {
        return this.handleRemove()
      }
      this.uploadExcel.excel2 = null
    },
    // 第一个移除文件
    removeFile1() {
      if(this. isShowExcel !== 'true') {
        return this.handleRemove()
      }
      this.$refs['rebateUpload'].clearFiles() //清除文件
      this.uploadExcel.excel1 = null  //清除文件
      this.uploadFile = {}
      // 是否显示上传组件
      this.isShowUpload = true
      // 文件名字
      this.isShowUploadtxt = false
      // 清空修改按钮
      // this.isShowStepOne = false
       //上传进度条
      this.percentage = 0
    },


    goNext(route, type) {
      if (type === 1) {
        setStore('chartData', this.lightRate)
      }
      this.$router.push({ path: route })
    },

    // 修改数据-点击出现弹窗
    changLogData() {
      this.isRepeatSubmit = true
      this.isShowInputLog = true
      this.doDownload = false
      // this.beforeLable = []
    },

    beforeUpload(file) {
      // const isZip = file.name.endsWith('zip');
      // if(!isZip) {
      //   return this.$message.error('上传文件仅支持zip格式')
      // }
      this.uploadFile = file
      this.isShowPer = true   // 进度条
      this.isShowUpload = false  // 上传框隐藏
      this.isShowUploadtxt = true  // 显示文件名字
      this.percentage += 60 + Math.floor(Math.random() * 10)
    },
    uploadSuccess(file) {
      if (file.status === 200) {
        this.waveName = file.data.hole
        this.isShowInputLog = true

        setStore('auuid', file.data.uuid)
      } else {
        if (file.status === 502) {
          this.$msgbox
            .confirm(this.$t('page.msgBoxLoginOut'), this.$t('page.loginOut'), {
              confirmButtonText: this.$t('page.loginAgin'),
              cancelButtonText: this.$t('page.cancel'),
              type: 'warning',
            })
            .then(() => {
              store.dispatch('FedLogOut').then(() => {
                location.reload()
              })
            })
        } else {
          this.$message.error(file.msg)
        }
      }
    },

    // 上传失败
    handleError() {
      this.$message.error('上传失败')
    },

    /* 提交信息 */
    async handleCompute(data = {}, button_req = false) {
      if (this.computeAllowed) {
        this.computeLoading = true
        this.showScreenshotsImg = true
        this.baseStepOne = []
        let info = null
        const lableList = this.waveName.map((item, index) => this.beforeLable[index] || null)
        // 请求参数
        const reqParams = {
          zero: Number(this.zero),
          formulas: this.formulaValue,
          labValue: lableList,
          uuid: getStore('auuid'),
          isRepeatSubmit: this.isRepeatSubmit,
          mole: this.mole,
          fit_opt: this.fitting,
          imageSwitcher: this.graphicalList,
          rmax: this.Rmax,
          absolute: this.absolute
        }

        if(data?.isRepeatSubmit) {
          reqParams.tvalue = data.tValue
          reqParams.isRepeatSubmit = data.isRepeatSubmit
        }

        if(button_req) {
          reqParams.isJhJl = this.isComplete
          reqParams.jhJlDtoList = this.completeList
          reqParams.isRepeatSubmit = true
        }
        try {
          info = await weSprStep2onewt(reqParams)
          console.log(info.data, 'one 稳态');
        } catch (err) {
          console.log(err);
        }
        if (info && info.status === 200) {
          this.paramResult = []
          this.originalData = {}
          this.reductionWater = []
          this.subtract = []
          // echarts,legend数据
          this.resultValue = info.data.resultValue
          // 最小的计数器的key
          // this.minKey = info.data.minKey
          this.timeMap = info.data.timeMap
          this.originalData = info.data.originalDataList_original
          // 原始图
          this.resultFormatValue = {
            ...formatData(info.data.originalDataList_original[0]),
          }
          // 归零图
          this.reductionWater = {
            ...formatData(info.data.originalDataList_zero[0]),
          }
          // 结合解离
          this.subtract = info.data.originalData_hl_merge
          this.fittedingList = info.data.originalData_hl_merge_fitting
          this.optimizeList = info.data.originalData_hl_merge_fitting_optimize
          // 分子量表格数据
          this.paramResult = info.data.paramResult
          // 结合解离 分界线
          this.dissociation = info.data.dissociation
          // 原始、归零分界线
          this.sprone_dissociation = info.data.sprone_dissociation
          // 计算结果表格
          this.paramTableInfo = info.data.result_data_excel
          this.avg5_map = info.data.avg5_map
          this.dissType = info.data.extB
          // 处理 详情底部结合解离点 数量
          this.completeList = info.data.hole.map(item => {
            return {
              key: item,
              start_jiehe: '',
              end_jiehe: '',
              start_jieli: '',
              end_jieli: ''
            }
          })
          if (this.isRepeatSubmit) {
            setStore('auuid', info.data.uuid)
          }

          // this.newDrawChart()
          let _this = this
          _this.$nextTick(() => {
            setTimeout(() => {

              _this.imgUpLoad(info.data.computeCrpValue.value)
              _this.doDownload = true
            }, 3000)
          })

          this.isShowInputLog = false
          this.isShowStepOne = true
          this.isShowStepTwo = true
        } 
        this.computeLoading = false
        this.isShowLoading = false
        this.isResetLoading = false
      }
    },

    /* 生成excali表格 */
    async imgUpLoad(value) {
      await fetchUploadExl({
        crpValue: value,
        uuid: getStore('auuid'),
        //  mole: this.mole,
        imgBase64: this.baseStepOne,
      })
    },

    // 全部清楚数据
    handleRemove() {
      this.$refs['rebateUpload'].clearFiles() //清除文件
      this.uploadExcel.excel1 = null  //清除文件
      this.uploadExcel.excel2 = null  //清除文件
      this.uploadFile = {}
      this.isShowExcel = 'true'

      // 调用子组件清除文件
      // this.$refs.secondUpload.handleRemove()

      //上传框
      this.isShowUpload = true
      this.isShowUploadtxt = false
      //可以计算
      this.computeAllowed = true
      this.computeLoading = false
      //上传进度条
      this.percentage = 0
      //显示进度
      this.isShowPer = false
      this.paramResult = []
      this.originalData = []
      this.stepTwoList = []
      this.allStepOneCharts = []
      this.isShowStepOne = false
      this.isShowStepTwo = false
      this.isShowInputLog = false
      this.doDownload = false
      this.baseStepOne = []
      this.beforeLable = []
    },

    downloadExl() {
      if (this.isShowStepTwo && this.doDownload) {
        let lang = this.lang === 'zh' ? 'CN' : 'ENG'
        const href = `${
          process.env.BASE_URL
        }receive/download/excel/6/${lang}/${getStore('auuid')}`
        window.open(href, '_blank')
      } else {
        this.$message({
          type: 'error',
          message: this.$t('page.doDownload'),
        })
      }
    },

    shotImg(isPush, data) {
      if(!isPush) return
      this.baseStepOne.push(data)
    },
  },
  computed: {
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      if (localStorage.getItem('spr-lang') === 'en') {
        data.LANG = 'ENG' // 传语言
      }
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog--center .el-dialog__body {
    display: flex;
    justify-content: center;
  }
}

.completeBox {
  height: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  .complete_Item {
    display: inline-block;
    margin-right: 30px;
    text-align: center;
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      .el-input {
        width: 200px;
      }
    }
  }
}
.upload-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  /deep/ .el-button--primary {
    width: 160px;
  }
}
.space {
  display: flex;
  margin: 0;
  .title-space {
    margin: 20px 0 0;
  }
  .space-title,
  .label-title {
    width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .space-title::before {
    content: '*';
    color: red;
    margin-right: 2px;
  }
}
.space-unit {
  margin-bottom: 20px;
}
.space-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  // margin-left: 250px;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}
.reset-back {
  display: flex;
  align-items: center;
  // margin: 0 20px 20px;
  .link {
    cursor: pointer;
    color: #409eff;
    font-style: normal;
    margin-right: 20px;
  }
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

// 计数器部分的样式
.each-numberBox {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .computed-text {
    width: 80px;
    margin-right: 6px;
    text-align: end;
    .computed-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.space-time {
  display: flex;
}
</style>